<template>
  <div
    :style="{
      fontSize: detail.style.fontSize + 'px',
      fontFamily: detail.style.fontFamily,
      color: detail.style.fontColor,
      textAlign: textAlign,
      lineHeight: lineHeight + 'px',
    }"
  >

    <div
      v-if="detail.dataBind.showType === 'text'"
    >
      <span>{{ param.value }}</span>
    </div>
    <div v-else>
      <el-input :value="param.value">
        <template v-if="detail.dataBind.showType === 'nameWithValueWithUnit'" slot="prepend">{{ param.name }}</template>
        <template v-if="detail.dataBind.showType === 'valueWithUnit' || detail.dataBind.showType === 'nameWithValueWithUnit'" slot="append">{{ param.unit }}</template>
      </el-input>
    </div>
  </div>
</template>

<script>
import BaseView from '../View'
import { getDeviceParam } from '@/api/iot/iotDeviceParamApi'
export default {
  name: 'IotParam',
  extends: BaseView,
  props: {

  },
  data() {
    return {
      param: {}
    }
  },
  watch: {
    detail: function(newVal) {
      this.getDeviceParam()
    }
  },
  created() {
    this.getDeviceParam()
  },
  methods: {
    getDeviceParam() {
      const that = this
      getDeviceParam({
        deviceCore: this.detail.dataBind.deviceCore,
        keyName: this.detail.dataBind.keyName,
        port: this.detail.dataBind.port
      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          that.param = data
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
  @import '@/styles/element-variables.scss';
  .primary-color {
    color: $--color-primary;
  }

  .item {
    margin-top: 5px;
    padding: 10px;
  }

</style>
